import React, {PureComponent} from "react";
import {
    ComponentType,
    FieldCtrl
} from "../Config";
import { getSimpleComp } from "../Base/helper/getSimpleComp";
import styles from "./index.module.less";
import {forEach, isEmpty} from "lodash-es";
import { dateStr2Timestamp } from "jh-utils";
import { Space, Button } from "antd";
import BaseComp from "../Base/BaseComp";

export default class SheetSearchComp extends BaseComp {
    formWrap;

    componentDidMount(){
        let { onRef} = this.props;
        onRef && onRef(this);
    }

    handleOk(){
        let { handleOk } = this.props;
        handleOk && handleOk();
    }
    handleCancel(){
        let { handleCancel } = this.props;
        handleCancel && handleCancel();
    }
    handleReset(){
        let { handleReset } = this.props;
        handleReset && handleReset();
    }

    mainRender() {
        const {searchFormConf = []} = this.props;
        return <div>
            {!isEmpty(searchFormConf) &&
            <div ref={(ref)=>{this.formWrap = ref}} className={styles.formWrap}>
                <div className={styles.formItemGroup}>
                    {
                        searchFormConf.map(c => {
                            let params = {};
                            if(c.componentType === 'CALENDAR' && c.isToday){
                                params.defaultValue = dateStr2Timestamp(new Date())
                            }
                            let {
                                componentType: cType,
                                name,
                                label,
                                componentValue,
                                required,
                                isRange,
                                ...restProps
                            } = Object.keys(c).reduce((res, cK) => c[cK] ? {...res, [cK]: c[cK]} : res, {});
                            const {code} = componentValue || {};
                            restProps = {
                                ...restProps,
                                ...params,
                            };
                            restProps.fieldName = name;
                            restProps.compLabel = label;
                            restProps.labelWidth = 'auto';
                            restProps.style = {
                                width: 380, marginRight: 8
                            };
                            if (code) {
                                cType === ComponentType.FINDER && (restProps.finderCode = code);
                                cType === ComponentType.COMBO_BOX && (restProps.selector = code);
                            }
                            required && (restProps.fieldCtrl = FieldCtrl.REQUIRED);
                            isRange && (restProps.range = isRange);

                            // 将弹出框绑定到父元素，防止抽屉弹框遮挡
                            // if ([
                            //   ComponentType.CALENDAR, ComponentType.COMBO_BOX, ComponentType.FINDER, ComponentType.ADDR_INPUT
                            // ].indexOf(cType) > -1) {
                            //   restProps.getPopupContainer = triggerNode => (triggerNode.parentNode || document.body)
                            // }
                            return getSimpleComp(cType, restProps);
                        })
                    }
                </div>
                <div style={{textAlign: 'center', padding: '16px 0', borderTop: '1px solid #e0e0e0'}}>
                    <Space>
                        <Button type='primary'
                                onClick={this.handleOk.bind(this)}>{this.formatMsgByCn('查询')}</Button>
                        <Button onClick={this.handleCancel.bind(this)}>{this.formatMsgByCn('取消')}</Button>
                        <Button onClick={this.handleReset.bind(this)}>{this.formatMsgByCn('重置')}</Button>
                    </Space>
                </div>
            </div>
            }
        </div>
    }
}
